<template>
	<div id="login">
		<div class="loginBox">
			<div class="inpBox">
				<el-input placeholder="请输入用户名" prefix-icon="el-icon-s-custom" v-model="userName"></el-input>
			</div>
			<div class="inpBox">
				<el-input placeholder="请输入用户密码" prefix-icon="el-icon-s-goods" show-password v-model="userPwd"></el-input>
			</div>
			<div class="special clearfix">
				<div class="inpBox">
					<el-input placeholder="请输入验证码" v-model="code"></el-input>
				</div>
				<div class="codeInpBox">
					
				</div>
			</div>
			<div class="inpBox">
				<el-button type="primary" @click="login()">登录</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	const appRequest = require('../util/request.js').default
	const api = require('../util/api.js').default
	const app = require('../util/app.js').default
	export default {
		data() {
			return {
				userName:"",
				userPwd:"",
				code:""
			}
		},
		methods: {
			// 页面跳转
			toUrl(name,param){
				this.$router.push({
					path:name,
					query:param,
				})
			},
			login(){
				this.toUrl('main')
			}
		},
		mounted() {
			appRequest(api.banner, 1, {
				act: 'getadlist'
			}, (res) => {
				console.log(res)
			})
		}
	}
</script>
<style scoped lang="scss">
	#login {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-image: url('../img/login_bg8.jpg');

		// background-size: 100% 100%;
		.loginBox {
			margin: 0 auto;
			width: 310px;
			background: white;
			margin-top: 300px;
			border-radius: 10px;
			padding: 0 10px;
			padding-top: 40px;
			padding-bottom: 20px;
			box-shadow: 0 0 20px #009688;
			>.inpBox,>.special {
				width: 90%;
				margin: 0 auto;
				padding: 5px;

				input {
					width: 100%;
					background: transparent;
					border: none;
				}
				.el-button{
					width: 100%;
					background: #009688;
				}
			}
			.special{
				.inpBox{
					width: 50%;
					float: left;
				}
				.codeInpBox{
					float: left;
					height: 40px;
					width: 50%;
					background: #009688;
				}
			}
		}
	}
</style>vh
